<template>
  <div id="item3Main" ref="itemRef"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    dataList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      myChart: null,
      option: {},
    };
  },
  mounted() {
    let nameList = [];
    let numList = [];
    // console.log(this.dataList);
    this.dataList.forEach((item) => {
      nameList.push(item.jiancheng);
      numList.push(item.jylsum);
    });
    let chartDom = this.$refs.itemRef;
    this.myChart = echarts.init(chartDom, null, {
      devicePixelRatio: 2.5,
    });
    this.option = {
      title: {
        top: 13,
        text: '本年度各市场交易量（吨）',
        textStyle: {
          color: '#fff',
          fontSize: 14,
          fontWeight: 400,
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLine: {
          //x轴线的颜色以及宽度
          show: true,
          lineStyle: {
            color: '#3C8DBF',
            width: 1,
            type: 'solid',
          },
        },
        splitLine: {
          // 分割线
          lineStyle: {
            color: '#3C8DBF',
            type: 'dashed',
          },
        },
      },
      yAxis: {
        type: 'category',
        data: nameList,
        axisLine: {
          //x轴线的颜色以及宽度
          show: true,
          lineStyle: {
            color: '#3C8DBF',
            width: 1,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
        },
      },
      series: [
        {
          type: 'bar',
          data: numList,
          barWidth: 14,
          itemStyle: {
            borderColor: '#157DFE',
            borderWidth: 1,
            color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
              {
                offset: 1,
                color: `rgba(9, 116, 253, 1)`,
              },
              {
                offset: 0,
                color: `rgba(1, 251, 255, 1)`,
              },
            ]),
          },
        },
      ],
    };
    this.myChart.setOption(this.option);
    window.addEventListener('resize', () => {
      this.myChart.resize();
    });
  },
};
</script>

<style lang="less" scoped>
#item3Main {
  width: 100%;
  height: 100%;
}
</style>
